<template>
    <div id="expertMessage">
        <div class="card">
            <ul>
                <li>编号：{{dat.memid}}</li>
                <li>姓名：{{dat.memName}}</li>
                <li>专长：{{dat.specialty}}</li>
                <li>单位：{{dat.company}}</li>
            </ul>
        </div>
        <div class="message">
            <ul>
                <li><span>姓名:  </span><el-input  v-model="dat.memName"></el-input></li>
                <li><span>性别:  </span><el-input v-model="dat.sex"></el-input></li>
                <li><span>手机号:  </span><el-input v-model="dat.phone"></el-input></li>
                <li><span>电子邮箱:  </span><el-input v-model="dat.email"></el-input></li>
                <li><span>单位地址:  </span><el-input v-model="dat.company"></el-input></li>
                <li class="btn">
                    <el-button  type="primary" @click="xg(dat)">修改</el-button>
                    <el-button  type="primary" @click="del()">账号注销</el-button>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import dayjs from 'dayjs'
    export default {
        components:{
            dayjs
        },
        data() {
            return {
                id:'',
                dat:{},
            };
        },
        mounted() {
            //获取到从前端获得的id
            this.id = localStorage.getItem('id');
            // 根据id获取对应的会员信息
            var that=this;
            this.$axios.post(
                'http://localhost:9090/api/TMember/GetCurrentTMemberById',
                this.$qs.stringify({id:that.id})
            ).then(function (response) {
                that.dat=(response.data[0])
                // console.log("++++++++++++++++++++++++++")
                // console.log(response.data[0])
            })

        },
        methods: {
            xg(dat){
				
                let that=this;
				
                this.$axios.post(
                    'http://localhost:9090/api/TMember/UpdateMemberForEditInfo',
                    this.$qs.stringify(dat)
                ).then(function (response) {
                    console.log("axios正常运行")
                })
                console.log('修改成功');
            },
            del(){
                let that=this
                if(confirm("是否删除")){
                this.$axios.post(
                    'http://localhost:9090/api/TMember/del',
                    this.$qs.stringify({id: that.id}),
                ).then(function (response) {
                    console.log("axios正常运行")
                    console.log(response.data)
                    alert('账号已注销')
                    that.$router.push({'path':'/index/bottom'})
                })
				}
            }

        }
    }
</script>

<style scoped >
    .btn{
        display: flex;
        justify-content: space-around;
    }
    #expertMessage {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
    #expertMessage  .card {
        flex: 1;
        background-image: url(../../assets/images/card.png);
        background-repeat: no-repeat;
        background-size: contain;
        padding-top: 150px;
        padding-left: 100px;
        text-align: left;
        font-size: 15px;
        text-shadow: 0 0 5px #ffffff, 0 0 5px #c5e2b1;
        margin-bottom: 10px;
    }
    .card{
        margin: 0 auto;
    }
    #expertMessage .message {
        width:60%;
    }
    #expertMessage .message ul li {
        line-height: 50px;
        padding-left: 50px;
        text-align: left;
    }
    #expertMessage .message ul li span {
        font-weight: bold;
        color: #000;
        width: 100px;
    }
    textarea{
        width: 330px;
        height: 100px;
        resize:none;
    }
    .message el-input{
        width: 60px;
    }
</style>
